<template>
  <van-image
    :round="round"
    :width="size"
    :height="size"
    :src="processImageUrl(avatarUrl)"
    :style="imageStyle"
    @error="handleImageError"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { processImageUrl, handleImageError } from '../utils/imageUtils';

interface UserAvatarProps {
  avatarUrl?: string;
  size?: string | number;
  round?: boolean;
  shadow?: boolean;
}

const props = withDefaults(defineProps<UserAvatarProps>(), {
  avatarUrl: '',
  size: '3rem',
  round: true,
  shadow: false
});

const imageStyle = computed(() => {
  const styles = {};
  
  if (props.shadow) {
    Object.assign(styles, {
      'box-shadow': '0 0 10px rgba(0, 0, 0, 0.2)',
    });
  }
  
  return styles;
});
</script>

<style scoped>
/* 可以添加其他样式 */
</style> 